﻿<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<c:set var="path" value="${pageContext.request.contextPath}" />

<!DOCTYPE html>
<html>
<base href="${path}/">

<head>
<meta http-equiv="Content-Type" content="text/html; Charset=utf-8" />
<meta http-equiv="Content-Language" content="zh-CN" />
<meta name="viewport"
	content="width=device-width, initial-scale=1, user-scalable=no" />
<title th:text="ZHI博客文章专栏'"></title>
<link rel="shortcut icon" href="images/logo.png" type="image/x-icon" />
<!--Layui-->
<link href="${path}/layui/css/layui.css" rel="stylesheet" />
<!--font-awesome-->
<link href="${path}/font-awesome/css/font-awesome.min.css"
	rel="stylesheet" />
<!--全局样式表-->
<link href="${path}/css/global.css" rel="stylesheet" />
<link href="${path}/css/animate.min.css" rel="stylesheet" />
<!-- 本页样式表 -->
<link href="${path}/css/detail.css" rel="stylesheet" />
<link href="${path}/css/blog.css" rel="stylesheet" />
<!-- jquery -->
<script src="${path}/js/jquery.min.js"></script>
	<script src="${path}/layui/layui.js "></script>
	<script src="${path}/js/global.js "></script>

	<script src="${path}/js/about.js "></script>
	<script src="${path}/js/detail.js "></script>

</head>

<body>

	<nav id="h" class="blog-nav layui-header">
		<div class="blog-container">

			<a href="#" class="blog-user" onclick="login()"> <i class="fa fa-qq"></i>
			</a> <a class="blog-logo" href="index.html">ZHI</a>

				<ul class="layui-nav" lay-filter="nav">
					<li class="layui-nav-item">
						<a href="${path}/index.jsp"><i class="fa fa-home fa-fw"></i>&nbsp;网站首页</a>
					</li>
					<li class="layui-nav-item">
						<a href="${path}/action/article/into"><i class="fa fa-file-text fa-fw"></i>&nbsp;文章专栏</a>
					</li>
					<li class="layui-nav-item">
						<a href="${path}/action/image/into"><i class="fa fa-paper-plane-o fa-fw"></i>&nbsp;杂七杂八</a>
					</li>
					<li class="layui-nav-item">
						<a href="${path}/action/timeline/into"><i class="fa fa-hourglass-half fa-fw"></i>&nbsp;点点滴滴</a>
					</li>
					<li class="layui-nav-item">
						<a href="${path}/action/about/into"><i class="fa fa-info fa-fw"></i>&nbsp;关于本站</a>
					</li>
					<span class="layui-nav-bar"></span>
				</ul>

			<a class="blog-navicon" href="javascript:;"> <i
				class="fa fa-navicon"></i>
			</a>
		</div>
	</nav>
<script type="text/html" id="commentlist">
{{# var mark=0;}}
{{#  layui.each(d.data, function(index, item){ }}

{{# if(item.parent_comment_id==0){ }}
{{# if(mark==0) }}
           </li>
{{# mark=0;}}
<li>
<div class="comment-parent">
     <img src="${path}/{{item.user.user_photo}}" alt="{{item.user.user_name}}">
     <div class="info">
     <span class="username">{{item.user.user_nickname}}</span>
	  {{# if(item.user_id==1){ }}
		:<span class="is_bloger">博主</span>
	 {{# }}}
	
     </div>
     <div class="content">
     <p>{{item.comment_content}}</p><p><br></p>
     </div>
     <p class="info info-footer"><span class="time">{{item.comment_date}}</span>&nbsp;&nbsp;&nbsp;&nbsp;<a class="btn-reply" style="color: #009688;font-size:14px;" href="javascript:;" onclick="btnReplyClick(this)">回复</a></p>
     </div>
 <!-- 回复表单默认隐藏 -->
               <div class="replycontainer layui-hide">
                   <div class="layui-form" >
                   <input type="hidden" id="parent_comment_id" name="parent_comment_id" value="{{item.comment_id}}">
                   <input type="hidden" id="user_id" lay-verify="userId" name="user_id" value="">
  					 <input type="hidden" id="article_id" name="article_id" value="{{item.article_id}}"  />
                                               
                       <div class="layui-form-item">
                           <textarea name="comment_content" lay-verify="replyContent" placeholder="回复  @{{ item.user.user_name }}:" class="layui-textarea" style="min-height:80px;"></textarea>
                       </div>
                       <div class="layui-form-item">
                           <button class="layui-btn layui-btn-mini" lay-submit="formReply" lay-filter="formReply">提交</button>
                       </div>
                   </div>
               </div>
{{#  } }}
        <hr>
{{# if(item.parent_comment_id!=0){ }}     

{{# mark=1; }}
	<div class="comment-child">
     <img src="${path}/{{item.user.user_photo}}" alt="{{item.user.user_name}}">
     <div class="info">
     <span class="username">{{item.user.user_name}} : 
	
	 {{# if(item.user_id==1){ }}
		<span class="is_bloger">博主</span>
	 {{# } }}
	 </span>&nbsp;回复 <span class="username">@{{ item.user.user_temp}}：</span><span>{{item.comment_content}}</span>
      </div>
      <p class="info"><span class="time">{{item.comment_date}}</span>&nbsp;&nbsp;&nbsp;</p>
  </div>
 
   
 {{#  } }}
 {{#  }); }}
</script>

<script>
layui.use(['flow','jquery', 'laytpl','layedit'] ,function(){
	  var flow = layui.flow;
	  var $ = layui.jquery;
	  var layedit=layui.layedit;
	var laytpl = layui.laytpl;
	var count;
	/*加载layedit*/
	var editIndex = layedit.build('remarkEditor', {
		height: 150,
		tool: ['face', '|', 'left', 'center', 'right', '|', 'link'],
	});
	  //加载数据评论
	  flow.load({
		  elem: '#messageList', //指定列表容器
		  isAuto:true,
		  done: function(page, next){
			  var lis = [];
			  $.ajax({
	      			url: '${path}/action/comment/list?id=${article.article_id}&page='+page,
	      			type:'post',
	      			dataType: 'json',
	      			success: function(data) {
	      				count = data.count;
	      				
	      				
	      				var tpl = $('#commentlist').html();
	      				laytpl(tpl).render(data, function(html){
	      					lis.push(html);
	      				});
	      				
	      				next(lis.join(''), page < count);  
	      				
	      			}      			
	      		});	
		  }
	  });
	  
	
 
	
		
	  
	
});


</script>
	<div class="blog-body">

		<div class="blog-container">
			<div class="blog-main">
				<blockquote class="layui-elem-quote sitemap layui-breadcrumb shadow"
					style="visibility: visible;">
					<a href="${path}/index.jsp" title="网站首页">网站首页<span
						class="layui-box">&gt;</span></a> <a href="${path}/article.jsp"
						title="文章专栏">文章专栏<span class="layui-box">&gt;</span></a> <a><cite
						class="title">${article.article_title}</cite></a>
				</blockquote>
				<div class="blog-main">

					<div id="parentArticleList"
						class="blog-main-left animated slideInLeft">

						<div class="article-detail shadow">
							<div class="article-detail-title title">${article.article_title}</div>
							<div class="article-detail-info">
								<span>发布时间：${article.article_date}</span> <span>作者：${article.user.user_name}</span>
								<span>浏览量：${article.article_views}</span>
							</div>
							<div id="articleContent" style="overflow: hidden;"
								class="article-detail-content">${article.article_content}
							</div>
						</div>

						<div class="blog-module shadow"
							style="box-shadow: 0 1px 8px #a6a6a6;">
							<fieldset class="layui-elem-field layui-field-title"
								style="margin-bottom: 0">
								<legend>来说两句吧</legend>
								<div class="layui-field-box">
						
                                   <form class="layui-form blog-editor">
                                            <input type="hidden" id="user_id" name="user_id" lay-verify="userId" />
                                            <input type="hidden" id="article_id" name="article_id" value="${article.article_id}"  />
                                            <input type="hidden" id="parent_comment_id" name="parent_comment_id" value="0"  />
                                               
                                                <div class="layui-form-item">
                                                    <textarea name="comment_content" lay-verify="content" id="remarkEditor" placeholder="请输入内容" class="layui-textarea"></textarea>
                                                </div>
                                                <div class="layui-form-item">
                                                    <button class="layui-btn" lay-submit="formLeaveMessage" lay-filter="formLeaveMessage">提交留言</button>
                                                </div>
                                            </form>
										
								</div>
							</fieldset>
							<div class="blog-module-title ">最新评论</div>
							<ul class="blog-comment " id="messageList"></ul>
						</div>
					</div>

					<div class="blog-main-right ">

						<div class="category-toggle ">
							<i class="fa fa-chevron-left "></i>
						</div>

						<div class="article-category shadow ">
							<div class="article-category-title ">分类导航</div>
									<!-- 分类导航后台数据循环展示 -->
								<c:forEach var="item" items="${lableList}">
								<a href="javascript:classifyList(${item.lable_id });">${item.lable_name}</a>
							
								</c:forEach>
							<div class="clear "></div>
						</div>
						<div class="blog-module shadow ">
							<div class="blog-module-title ">相似文章</div>
							<ul class="blog-module-ul ">
								
							</ul>
						</div>
						<div class="blog-module shadow ">
							<div class="blog-module-title ">随便看看</div>
							<ul class="blog-module-ul ">
								
							</ul>
						</div>
					</div>
				</div>
				<div class="clear "></div>
			</div>
		</div>
	</div>

	<footer id="f " class="blog-footer ">
		<p>
			<span>Copyright</span><span>©</span><span>2018</span><a
				href="http://www.long225.cn ">Long博客</a><span>Design By
				Longwang</span>
		</p>
		<p>
			<a href="http://www.miitbeian.gov.cn " target="_blank ">湘ICP备18010289号</a>
		</p>
	</footer>

		<ul class="layui-nav layui-nav-tree layui-nav-side blog-nav-left layui-hide" lay-filter="nav">
			<li class="layui-nav-item">
				<a href="${path}/index.jsp"><i class="fa fa-home fa-fw"></i>&nbsp;网站首页</a>
			</li>
			<li class="layui-nav-item">
				<a href="${path}/action/article/into"><i class="fa fa-file-text fa-fw"></i>&nbsp;文章专栏</a>
			</li>
			<li class="layui-nav-item">
				<a href="${path}/action/image/into"><i class="fa fa-paper-plane-o fa-fw"></i>&nbsp;杂七杂八</a>
			</li>
			<li class="layui-nav-item">
				<a href="${path}/action/timeline/into"><i class="fa fa-road fa-fw"></i>&nbsp;点点滴滴</a>
			</li>
			<li class="layui-nav-item">
				<a href="${path}/action/about/into"><i class="fa fa-info fa-fw"></i>&nbsp;关于本站</a>
			</li>
			<span class="layui-nav-bar"></span>
		</ul>


	<div class="blog-share layui-hide ">
		<div class="blog-share-body ">
			<div style="width: 200px; height: 100%;">
				<div class="bdsharebuttonbox bdshare-button-style0-32 "
					data-bd-bind="1533793311472 ">
					<a class="bds_qzone " data-cmd="qzone " title="分享到QQ空间 "></a> <a
						class="bds_tsina " data-cmd="tsina " title="分享到新浪微博 "></a> <a
						class="bds_weixin " data-cmd="weixin " title="分享到微信 "></a> <a
						class="bds_sqq " data-cmd="sqq " title="分享到QQ好友 "></a>
				</div>
			</div>
		</div>
	</div>

	<div class="blog-mask animated layui-hide "></div>

	

</body>
</html>